<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="/css/main.css"/>
  <link rel="stylesheet" href="/cms/layui/css/layui.css">
  <script src="/js/uikit.js"></script>
</head>

<body>

<div th:insert="~{common::#header}"></div>

<div class="uk-section uk-section-muted">
  <div class="uk-container">
    <div class="uk-background-default uk-border-rounded uk-box-shadow-small">
      <div class="uk-container uk-container-xsmall uk-padding-large">
        <article class="uk-article">
          <h1 class="uk-article-title">在此处记录下您的问题</h1>
          <div class="uk-article-content">
            <form class="uk-form-stacked uk-margin-medium-top layui-form" onsubmit="return false;">
              <div class="uk-margin-bottom">
                <label class="uk-form-label" for="name">标题</label>
                <div class="uk-form-controls">
                  <input id="name" class="uk-input uk-border-rounded" autocomplete="off" name="name" type="text"
                         required="">
                </div>
              </div>



              <div class="uk-margin-bottom">
                <label class="uk-form-label">摘要</label>
                <div class="uk-form-controls">
                  <input id="zhaiYao" class="uk-input uk-border-rounded" autocomplete="off" type="text"
                         required="">
                </div>
              </div>


              <div class="uk-margin-bottom">
                <label class="uk-form-label">文章标签</label>
                <div class="uk-form-controls">
                  <input th:each="tag:${tags}" type="checkbox" th:name="${tag.tagName}" th:title="${tag.tagName} ">
                </div>
              </div>


              <div class="uk-margin-bottom">
                <label class="uk-form-label" for="lay_edit">文章详细</label>
                <div class="uk-form-controls">
                  <textarea id="lay_edit" lay-verify="content" name="content"></textarea>
                </div>
              </div>
              <div class="uk-text-center">
                <input class="uk-button uk-button-primary uk-border-rounded" type="submit" lay-submit=""
                       lay-filter="formSubmit" value="发布">
              </div>
            </form>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

<div id="offcanvas-docs" data-uk-offcanvas="overlay: true">
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" type="button" data-uk-close></button>
    <h5 class="uk-margin-top">Getting Started</h5>
    <ul class="uk-nav uk-nav-default doc-nav">
      <li class="uk-active"><a href="article.html">Template setup</a></li>
      <li><a href="article.html">Basic theme setup</a></li>
      <li><a href="article.html">Navigation bar</a></li>
      <li><a href="article.html">Footer options</a></li>
      <li><a href="article.html">Creating your first post</a></li>
      <li><a href="article.html">Creating docs posts</a></li>
      <li><a href="article.html">Enabling comments</a></li>
      <li><a href="article.html">Google Analytics</a></li>
    </ul>
    <h5 class="uk-margin-top">Product Features</h5>
    <ul class="uk-nav uk-nav-default doc-nav">
      <li><a href="article.html">Hero page header</a></li>
      <li><a href="article.html">Category boxes section</a></li>
      <li><a href="article.html">Fearured docs section</a></li>
      <li><a href="article.html">Video lightbox boxes section</a></li>
      <li><a href="article.html">Frequently asked questions section</a></li>
      <li><a href="article.html">Team members section</a></li>
      <li><a href="article.html">Call to action section</a></li>
      <li><a href="article.html">Creating a changelog</a></li>
      <li><a href="article.html">Contact form</a></li>
      <li><a href="article.html">Adding media to post and doc content</a></li>
      <li><a href="article.html">Adding table of contents to docs</a></li>
      <li><a href="article.html">Adding alerts to content</a></li>
    </ul>
    <h5 class="uk-margin-top">Customization</h5>
    <ul class="uk-nav uk-nav-default doc-nav">
      <li><a href="article.html">Translation</a></li>
      <li><a href="article.html">Customization</a></li>
      <li><a href="article.html">Development</a></li>
      <li><a href="article.html">Sources and credits</a></li>
    </ul>
    <h5 class="uk-margin-top">Help</h5>
    <ul class="uk-nav uk-nav-default doc-nav">
      <li><a href="article.html">Contacting support</a></li>
    </ul>
  </div>
</div>

<div id="offcanvas" data-uk-offcanvas="flip: true; overlay: true">
  <div class="uk-offcanvas-bar">
    <a class="uk-logo" href="index.html">Guia</a>
    <button class="uk-offcanvas-close" type="button" data-uk-close></button>
    <ul class="uk-nav uk-nav-primary uk-nav-offcanvas uk-margin-top uk-text-center">
      <li><a href="index.html">Home</a></li>
      <li><a href="category.html">Category</a></li>
      <li><a href="article.html">Article</a></li>
      <li><a href="changelog.html">Changelog</a></li>
      <li class="uk-active"><a href="contact.html">Contact</a></li>
      <li>
        <div class="uk-navbar-item"><a class="uk-button uk-button-primary" href="contact.html">Contact</a></div>
      </li>
    </ul>
    <div class="uk-margin-top uk-text-center">
      <div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center">
        <div>
          <a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link" target="_blank"></a>
        </div>
        <div>
          <a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link" target="_blank"></a>
        </div>
        <div>
          <a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link" target="_blank"></a>
        </div>
        <div>
          <a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link" target="_blank"></a>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="uk-section uk-text-center uk-text-muted">
  <div class="uk-container uk-container-small">
    <div>
      <ul class="uk-subnav uk-flex-center">
        <li><a href="index.html">Home</a></li>
        <li><a href="changelog.html">Changelog</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div class="uk-margin-medium">
      <div data-uk-grid class="uk-child-width-auto uk-grid-small uk-flex-center">
        <div class="uk-first-column">
          <a href="https://twitter.com/" data-uk-icon="icon: twitter" class="uk-icon-link uk-icon" target="_blank"></a>
        </div>
        <div>
          <a href="https://www.facebook.com/" data-uk-icon="icon: facebook" class="uk-icon-link uk-icon"
             target="_blank"></a>
        </div>
        <div>
          <a href="https://www.instagram.com/" data-uk-icon="icon: instagram" class="uk-icon-link uk-icon"
             target="_blank"></a>
        </div>
        <div>
          <a href="https://vimeo.com/" data-uk-icon="icon: vimeo" class="uk-icon-link uk-icon" target="_blank"></a>
        </div>
      </div>
    </div>
    <div class="uk-margin-medium uk-text-small uk-link-muted">Made by a <a
            href="https://drifter.works/">Drifter</a> in Antigua Guatemala.
    </div>
  </div>
</footer>

<script src="/js/awesomplete.js"></script>
<script src="/js/custom.js"></script>
<script src="/cms/layui/layui.js" charset="utf-8"></script>
<script>
  layui.use(['layedit', 'form'], function () {
    var form = layui.form;
    var $ = layui.$;
    var layedit = layui.layedit;
    layedit.set({	//设置图片接口
      uploadImage: {
        url: '/file/uploads', //接口url
        type: 'post'
      }
    });

    //创建一个编辑器
    var index = layedit.build('lay_edit', {

      height: 550
    });
    //提交时把值同步到文本域中
    form.verify({
      //content富文本域中的lay-verify值
      content: function (value) {
        return layedit.sync(index);
      }
    });

    //监听提交
    form.on('submit(formSubmit)', function (data) {
      $.ajax({
        url: '/article/add',
        type: 'POST',
        dataType: 'JSON',
        data: {
          articleName:$("#name").val(),
          content:$("#lay_edit").val(),
          zhaiYao:$("#zhaiYao").val(),
          tags:JSON.stringify(data.field).split("content")[0]
        },
        success: function (result) {
          if (result.code == 200) {
            layer.msg(result.msg);
            return false;
          } else {
            layer.msg(result.msg);
            return false;
          }
        }
      })

      return false;

    })
  });
</script>

</body>

</html>